
var btnObj = document.querySelector('button')
btnObj.onclick = function() {
    document.querySelector('.total').style.display = 'block'
    btn()
    btnObj.style.display = 'none'
}

function btn() {
    function random(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min)
    }
    
    // ### 随机出现星星
    // 1 定时器1s
    // 2 定时器函数中
    t = setInterval(function () {
        // 2.1 造星星
        var imgObj = document.createElement('img')
        imgObj.src = './star.gif'
        // 2.2 随机宽度
        var min = 20
        var max = 100
        imgObj.width = random(min, max)
        // 2.3 定位随机范围（脚下留心：offsetWidth不能用 为啥 因为这个标签还没有放到页面
        imgObj.style.position = 'absolute'
        var min = 0
        var max = (window.innserWidth || document.documentElement.clientWidth) - imgObj.width
        imgObj.style.left = random(min, max) + 'px'
        var max = (window.innerHeight || document.documentElement.clientHeight) - imgObj.width
        imgObj.style.top = random(min, max) + 'px'
        // 2.4 追加到页面
        document.body.appendChild(imgObj)
    }, 1000)
    
    // ### 删除
    // 1 给body绑定点击事件
    var bodyObj = document.body
    // 2 事件处理函数中
    bodyObj.onclick = function (evt) {
        // 2.1 获取事件对象
        var e = evt || window.event
        // 2.2 获取操作的标签
        var target = e.target || e.srcElement
        // 2.3 判断是否是img 是删除  （注：因为body里面还有很多其他的标签
        if (target.nodeName === 'IMG') {
            // 父节点.removeChild(子节点)
            bodyObj.removeChild(target)
        }
    }

    // 1 定时器 网页随机出现星星 1s
    // 2 定时器 血条  1%/s
    setInterval(function () {
        var num = parseInt(document.querySelector('.num').style.width)
        num--
        document.querySelector('.num').style.width = num + '%'
        if (num == 0) {
            clearInterval(t)
            alert('游戏结束')
        }
    }, 1000);    
}
// btn()





